<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="3">
          <div
            style="
              line-height: 40px;
              font-weight: 600;
              font-size: 24px;
              margin-left: 16px;
            "
          >
            站点
          </div>
        </el-col>
        <el-col :span="5" :offset="16">
          <el-button
            type="primary"
            icon="el-icon-back"
            circle
            @click.native="revert"
          ></el-button>
          <!-- 添加按钮 -->
          <el-button
            type="primary"
            icon="el-icon-plus"
            circle
            @click="dialogAdd = true"
          ></el-button>
          <!-- 添加弹窗 -->
          <el-dialog
            title="添加站点"
            :visible.sync="dialogAdd"
            width="30%"
            :before-close="handleClose"
          >
            <span slot="footer" class="dialog-footer">
              <el-form ref="addform" :model="addform">
                <el-form-item label="名称:">
                  <el-input v-model="addform.addname"></el-input>
                </el-form-item>
              </el-form>

              <el-form ref="addform" :model="addform">
                <el-form-item label="图片:">
                  <el-input v-model="addform.addimgurl"></el-input>
                </el-form-item>
              </el-form>

              <el-form ref="addform" :model="addform">
                <el-form-item label="描述:">
                  <el-input v-model="addform.adddescribe"></el-input>
                </el-form-item>
              </el-form>
              <el-button @click="dialogAdd = false">取 消</el-button>
              <el-button type="primary" @click="dialogAdd = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <!-- 地图按钮 -->
          <el-button
            type="primary"
            icon="el-icon-location"
            circle
            style="margin-left: 10px"
            @click="dialogMap = true"
          ></el-button>
          <!-- 地图弹窗 -->
          <el-dialog
            title="地图"
            :visible.sync="dialogMap"
            width="30%"
            :before-close="editClose"
          >
            <el-card><h1>百度地图</h1></el-card>
            <span slot="footer" class="dialog-footer"> </span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogMap = false">取 消</el-button>
              <el-button type="primary" @click="dialogMap = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <!-- 编辑按钮 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="dialogVisible = true"
            style="margin-left: 10px"
          ></el-button>
          <!-- 编辑弹窗 -->
          <el-dialog
            title="编辑站点"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="editClose"
          >
            <span slot="footer" class="dialog-footer">
              <el-form ref="editform" :model="editform">
                <el-form-item label="图片链接:">
                  <el-input v-model="editform.editimgurl"></el-input>
                </el-form-item>
              </el-form>

              <el-form ref="editform" :model="editform">
                <el-form-item label="名称:">
                  <el-input v-model="editform.editname"></el-input>
                </el-form-item>
              </el-form>

              <el-form ref="editform" :model="editform">
                <el-form-item label="描述:">
                  <el-input v-model="editform.editdescribe"></el-input>
                </el-form-item>
              </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>

          <el-button
            type="primary"
            icon="el-icon-minus"
            circle
            style="margin-left: 10px"
            @click="thedelete"
          ></el-button>
        </el-col>

        <!-- 内容 -->
        <el-col :span="24">
          <el-card style="height: 195px">
            <!-- 图片 -->
            <el-col :span="7" :offset="1">
              <img
                src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2117130133,781559457&fm=26&gp=0.jpg"
                style="width: 265px; height: 155px; margin-top: 20px"
                alt=""
              />
            </el-col>
            <!-- 内容 -->
            <el-col :span="6" :offset="2">
              <div style="margin-top: 25px">Token：</div>
              <div style="margin-top: 12px">名称：</div>
              <div style="margin-top: 12px">说明：</div>
              <div style="margin-top: 12px">创建时间：</div>
              <div style="margin-top: 12px">更新时间：</div>
            </el-col>
            <!-- 二维码 -->
            <el-col :span="6" :offset="2">
              <img
                src="https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1472633963,3170277749&fm=74&app=80&f=PNG&size=f121,121?sec=1880279984&t=0108efabf3ffbebc7ebdf3c9674bcc54"
                style="margin-top: 35px"
              />
            </el-col>
          </el-card>

          <!-- tabs栏 -->
          <el-col>
            <el-tabs v-model="siteactive" type="card">
              <el-tab-pane label="子站点" name="first">
                <subsite />
              </el-tab-pane>

              <el-tab-pane label="设备" name="second">
                <tabsdevics />
              </el-tab-pane>

              <el-tab-pane label="告警信息" name="third">
                <warning />
              </el-tab-pane>

              <el-tab-pane label="地图信息" name="fourth">
                <sitemap />
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import tabsdevics from "./tabs-devics.vue";
import subsite from "./tabs-subsites.vue";
import warning from "./tabs-warning.vue";
import sitemap from "./tabs-map.vue";
export default {
  components: {
    tabsdevics,
    subsite,
    warning,
    sitemap,
  },
  data() {
    return {
      siteactive: "first",
      dialogMap: false,
      dialogAdd: false,
      dialogVisible: false,
      addform: {
        addimgurl: "",
        adddname: "",
        adddescribe: "",
      },
      editform: {
        editimgurl: "",
        editname: "",
        editdescribe: "",
      },
    };
  },
  methods: {
    revert() {
      this.$router.push("sitename");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    editClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    thedelete() {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$msg({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$msg({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.el-main {
  background-color: #fff;
  padding: 0px;
  margin-top: 40px;
}
.site-content {
  float: left;
  margin-top: -70px;
  margin-left: 115px;
}
/deep/ .el-card__body {
  padding: 0;
}
</style>
